<template>
  <el-table
    :data="tableData9"
    :header-cell-style="{ 'text-align': 'center' }"
    :cell-style="{ 'text-align': 'center' }"
    style="width: 100%"
    max-height="500"
  >
    <!-- @cell-mouse-enter="handleCellEnter"
    @cell-mouse-leave="handleCellLeave" -->
    <el-table-column
      v-for="(item, index) in tableColData"
      :prop="item.id"
      :label="item.name"
      :key="index"
    >
      <el-table-column
        v-for="item1 in item.children"
        :prop="item1.id"
        :label="item1.name"
        :key="item1.id"
      >
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableColData: [
        {
          id: "num",
          name: "序号",
        },
        {
          id: "class",
          name: "课程",
        },
        {
          id: "floor",
          name: "地下一层",
          children: [
            {
              id: "numRoom",
              name: "间",
            },
            {
              id: "areaOfUse",
              name: "使用面积",
            },
            {
              id: "areaOfStru1",
              name: "建筑面积1",
            },
            {
              id: "areaOfStru2",
              name: "建筑面积2",
            },
          ],
        },
        {
          id: "floor",
          name: "地下一层",
          children: [
            {
              id: "numRoom",
              name: "间",
            },
            {
              id: "areaOfUse",
              name: "使用面积",
            },
            {
              id: "areaOfStru1",
              name: "建筑面积1",
            },
            {
              id: "areaOfStru2",
              name: "建筑面积2",
            },
          ],
        },
        {
          id: "floor",
          name: "地下一层",
          children: [
            {
              id: "numRoom",
              name: "间",
            },
            {
              id: "areaOfUse",
              name: "使用面积",
            },
            {
              id: "areaOfStru1",
              name: "建筑面积1",
            },
            {
              id: "areaOfStru2",
              name: "建筑面积2",
            },
          ],
        },
        {
          id: "floor",
          name: "地下一层",
          children: [
            {
              id: "numRoom",
              name: "间",
            },
            {
              id: "areaOfUse",
              name: "使用面积",
            },
            {
              id: "areaOfStru1",
              name: "建筑面积1",
            },
            {
              id: "areaOfStru2",
              name: "建筑面积2",
            },
          ],
        },
      ],
      // 表内容
      tableData9: [
        {
          num: "1-1-1",
          class: "小学教室",
          AperRoom: "84",
          numRoom: "13",
          areaOfUse: "1092",
          areaOfStru1: "1985",
          areaOfStru2: "1985",
        },
      ],
    };
  },
};
</script>